<template>
    <div class="nest">
        <el-form class="search-form" inline size="mini">
            <!-- <el-form-item>
                <el-input v-model="search.title" placeholder="输入直播间名称" clearable @change="getList" />
            </el-form-item> -->
            <el-form-item>
                <el-select v-model="search.nest_id" placeholder="所属宠窝" clearable @change="getList">
                    <el-option v-for="(v, i) in petList.petNestList" :key="i" :label="v.title" :value="v.id" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="search.state" placeholder="状态" clearable @change="getList">
                    <el-option label="启用" value="1" />
                    <el-option label="禁用" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">查询</el-button>
                <el-button icon="el-icon-refresh-left" size="mini" @click="handleResetSearch">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="table">
            <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" v-loading="loading">
                <el-table-column prop="id" label="ID" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="所属宠窝" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.nest.title }}
                    </template>
                </el-table-column>
                <el-table-column prop="live_camera_num" label="摄像头数量" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="live_device_num" label="其他设备数量" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="v6" label="状态" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.state" :active-value="1" :inactive-value="2"
                            @change="updataState(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" label="创建时间" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作" width="350">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="cameraData(scope.row)">摄像头管理</el-button>
                        <el-button size="mini" @click="deviceData(scope.row)">设备管理</el-button>
                        <el-button type="success" size="mini" @click="queryDataList(scope.row)">数据</el-button>
                        <el-button type="danger" size="mini" @click="nestDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="search.page" :page-sizes="[10, 20, 30, 40, 100]" :page-size="search.size" background
                    layout="total, sizes, prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>
        <!-- 摄像头管理弹窗 -->
        <el-dialog title="摄像头设备" :visible.sync="dialogVisible" :before-close="handleClose">
            <add-camera ref="addCamera" @success="getList"></add-camera>
            <el-table :data="tableData" :border="true" style="width: 100%;margin-bottom: 20px;">
                <el-table-column prop="id" label="ID" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="v4" label="摄像头名称" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="v2" label="别名" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="v3" label="排序" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作">
                    <template>
                        <el-button type="primary" size="mini" @click="dialogVisible = true">编辑</el-button>
                        <el-button type="danger" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 其他设备弹窗 -->
        <el-dialog title="其他设备" :visible.sync="dialogVisible1" :before-close="handleClose">
            <addDevice ref="addCamera" @success="getList"></addDevice>
            <el-table :data="tableData" :border="true" style="width: 100%;margin-bottom: 20px;">
                <el-table-column prop="id" label="ID" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="v4" label="设备名称" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="v2" label="别名" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="v3" label="价格" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="v3" label="排序" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作">
                    <template>
                        <el-button type="primary" size="mini" @click="dialogVisible1 = true">编辑</el-button>
                        <el-button type="danger" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import addCamera from "./add-camera.vue"
import addDevice from "./add-device.vue"

export default {
    components: { addCamera, addDevice },
    data() {
        return {
            loading: false,
            search: {
                title: "",	//true	string		名称
                nest_id: "",	//true	int		宠窝 id
                state: "",	//true	string		状态 0 全部 1 启用 2 禁用
                page: 1,	//true	int		当前页
                size: 10,	//true	int		每页多少条
            },
            tableData: [],
            total: 0,
            petList: {
                petCategoryList: [],
                petNestList: [],
            },
            dialogVisible: false,
            dialogVisible1: false,
        }
    },
    created() {
        this.getList()
        this.getCategoryList()
    },
    methods: {
        cameraData: function (data) {
            this.$router.push({ path: '/device/Camera', query: { nest_id: data.nest_id } })
        },
        deviceData: function (data) {
            this.$router.push({ path: '/device/other', query: { nest_id: data.nest_id } })
        },
        queryDataList: function (data) {
            this.$router.push({ name: 'data-liat', query: { id: data.id } })
        },
        handleClose() {

        },
        // 宠窝列表
        async getCategoryList() {
            let res = await this.$request({
                url: '/admin/pet.list/add',
                method: 'get',
                params: {}
            })
            // console.log(res);
            if (res.code == 200) {
                this.petList = res.result
            }
        },
        // 删除直播间
        nestDelete(data) {
            this.$confirm(`确认删除直播间【${data.nest.title}】吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await this.$request({
                    url: '/admin/live.list/delete',
                    method: 'post',
                    data: { id: data.id }
                })
                if (res.code == 200) {
                    this.$message.success("删除成功")
                    this.getList()
                }
            })
        },
        // 修改直播间状态
        async updataState(data) {
            let res = await this.$request({
                url: '/admin/live.list/state',
                method: 'post',
                data: { id: data.id }
            })
            if (res.code == 200) {
                this.$message.success("操作成功")
            }
        },
        // 直播间列表
        async getList() {
            this.loading = true
            let res = await this.$request({
                url: '/admin/live.list/index',
                method: 'get',
                params: this.search
            })
            this.loading = false
            if (res.code == 200) {
                this.tableData = res.result.data
                this.total = res.result.total
            }
        },
        handleResetSearch() {
            this.search = {
                title: "",	//true	string		名称
                nest_id: "",	//true	int		宠窝 id
                state: "",	//true	string		状态 0 全部 1 启用 2 禁用
            }
        },
        //分页
        handleSizeChange(e) {
            this.search.size = e;
            this.getList()
        },
        handleCurrentChange(e) {
            this.search.page = e;
            this.getList()
        },
    }
}
</script>

<style lang="scss">
.nest {
    width: 100%;
    height: 60px;

    .search-form {
        background: #fff;
        border-radius: 12px;
        padding: 12px 20px;
        margin-bottom: 20px;

        .el-form-item--mini.el-form-item {
            margin-bottom: 0;
        }
    }

    .table {
        padding: 12px 20px;
        background: #fff;
    }
}
</style>
